@extends('wx.layout.default')

@section('wx.pheader')
  @include('wx.layout.swiper')
@stop

@section('wx.pbody')

  @if( !$warehouse)
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">答题活动暂未开始</h2>
        <div class="weui-form__desc">请关注我们的公众号留意开放时间！</div>
      </div>
      <div class="weui-form__control-area"></div>
      <div class="weui-form__opr-area">
        <a href="/" class="weui-btn weui-btn_default">返回</a>
      </div>
    </div>
  @else
    @if(!$can)
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">您已经完成今天的答题<br />感谢您的参与！</h2>
        <div class="weui-form__desc">端午节期间答题可得<b>2</b>积分！</div>
      </div>
      <div class="weui-form__control-area"></div>
      <div class="weui-form__opr-area">
        <a href="/" class="weui-btn weui-btn_default">返回</a>
      </div>
    </div>

    @else
    <form class="form-horizontal" id="wx" autocomplete="off">
    <div class="weui-form">
      <div class="weui-form__text-area">
        <h2 class="weui-form__title">2020端午节签到答题</h2>
        <div class="weui-form__desc">端午节期间答题可得<b>2</b>积分！</div>
      </div>
      <div class="weui-form__control-area">
        {{ csrf_field() }}
        <input type="hidden" name="warehouse" value="{{$warehouse->id}}">
        @foreach($warehouse->items as $i=>$item)
          <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells__title">{{$i+1}}、{{ $item->question->title}}</div>
            <input type="hidden" name="question{{$i+1}}" value="{{$item->question->id}}">
            <div class="weui-cells weui-cells_radio">
              @foreach($item->question->options as $opt)
              <label class="weui-cell weui-cell_active weui-check__label" for="opt{{$opt->id}}">
                  <div class="weui-cell__bd">
                      <p>{{$opt->content}}</p>
                  </div>
                  <div class="weui-cell__ft">
                      <input type="radio" class="weui-check" name="radio{{$i+1}}" id="opt{{$opt->id}}" value="{{$opt->id}}">
                      <span class="weui-icon-checked"></span>
                  </div>
              </label>
              @endforeach
            </div>

          </div>
        @endforeach
      </div>

      <div class="weui-form__opr-area">
        <button class="weui-btn weui-btn_primary" id="btnAnwser">提交答案</button>
      </div>

    </div>
    </form>
    @endif
  @endif



@stop

@section('javascript')

  <script src="//cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
  <script src="{{URL::asset('/assets/js/jquery-validate-methods.js')}}"></script>
  <script src="//cdn.bootcss.com/jquery-weui/1.2.1/js/swiper.min.js"></script>
  <script src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script type="text/javascript">
    $(function() {

      $("#wx").validate({

              onfocusout: false,
              onkeyup: false,

              rules: {
                  radio1: {required: true},
                  radio2: {required: true},
                  radio3: {required: true},
                  radio4: {required: true},
                  radio5: {required: true},
              },
              messages: {
                  radio1: {required: "请选择第一题的答案"},
                  radio2: {required: "请选择第二题的答案"},
                  radio3: {required: "请选择第三题的答案"},
                  radio4: {required: "请选择第四题的答案"},
                  radio5: {required: "请选择第五题的答案"},
              },

              showErrors: function (errorMap, errorList) {
                  $.each(errorList, function (i, v) {
                      layer.msg(v.message, {shift: -1, time: 2000});
                      return false;
                  });
              },

              submitHandler: function (form) {
                  var answer = [];
                  $("input[name^='radio']:checked").each(function(i){
                    answer[i] = $(this).val();
                  });
                  var question = [];
                  $("input[name^='question']").each(function(i){
                    question[i] = $(this).val();
                  });
                  $.post('{{route('wx.my.question')}}', {
                      '_token': $("input[name='_token']").attr('value'),
                      'id': $("input[name='warehouse']").val(),
                      'answer': answer,
                      'question':question,
                      'is_submit': true
                  }, function (data) {
                      console.log(data);
                      layer.msg(data.message, {shift: -1}, function () {
                          if (data.status === true && data.url != null) {
                              $(window).attr('location', data.url);
                          }
                      });

                  }, 'json').error(function (data) {
                      layer.msg(data.responseJSON.message);
                  });
              }

          });

      $('.swiper-container').swiper({
        loop: true,
        autoplay: 5000,
        pagination: '.swiper-pagination',
        paginationClickable: true
      });

    });
  </script>
@stop